<template>
	<div class="system-add-dept-container">
		<el-drawer title="修改租户" v-model="showWindows" @close="onCancel">
			<el-form ref="tenantFormRef" :model="tenantInfo" :rules="rules" size="small" label-width="30%" style="margin-top: 30px; width: 90%">
				<el-form-item label="租户编码" prop="tenantCode">
					<el-input v-model="tenantInfo.tenantCode" placeholder="请输入租户编码" />
				</el-form-item>
				<el-form-item label="公司名称" prop="companyName">
					<el-input v-model="tenantInfo.companyName" placeholder="请输入公司名称" />
				</el-form-item>
				<el-form-item label="过期时间" prop="overdueTime">
					<el-date-picker
						disabled
						v-model="tenantInfo.overdueTime"
						type="date"
						:disabledDate="disableDate"
						placeholder="请选择过期时间"
						style="width: 100%"
					/>
				</el-form-item>
				<el-form-item label="公司LOGO" prop="companyLogo">
					<div class="cropper-img-warp">
						<div class="mb15 mt15">
							<img class="cropper-img" :src="tenantInfo.companyLogo" />
						</div>
						<el-button type="primary" size="small" @click="onCropperDialogOpen">
							<el-icon>
								<elementCrop />
							</el-icon>
							更换头像
						</el-button>
					</div>
				</el-form-item>
			</el-form>
			<div class="el-drawer__footer">
				<el-button @click="onCancel" size="small">取 消</el-button>
				<el-button type="primary" @click="onSubmit" size="small">确 定</el-button>
			</div>
		</el-drawer>
	</div>

	<CropperDialog ref="cropperDialogRef" />
</template>

<script lang="ts">
import { reactive, ref, toRefs } from 'vue';
import { modTenantInfo, getTenantInfo } from '/@/api/tenant/info/index';
import { ElMessage } from 'element-plus';
import dayjs from 'dayjs';
import CropperDialog from '/@/components/cropper/index.vue';

export default {
	name: 'editTenant',
	emits: ['initTableData'],
	components: {
		CropperDialog,
	},
	props: {},
	setup(props, context) {
		const tenantFormRef = ref();
		const cropperDialogRef = ref();

		const state = reactive({
			showWindows: false,
			tenantInfo: {
				tenantId: '',
				companyName: '',
				companyLogo: '',
				tenantCode: '',
				overdueTime: '',
			},
			tenantId: '',
			rules: {
				companyName: [{ required: true, message: '公司名称不能为空', trigger: 'blur' }],
				tenantCode: [{ required: true, message: '租户编码不能为空', trigger: 'blur' }],
				overdueTime: [{ required: true, message: '过期时间不能为空', trigger: 'blur' }],
				companyLogo: [{ required: true, message: '公司LOGO不能为空', trigger: 'blur' }],
			},
		});

		//打开添加窗口
		const openWindows = (tenantId: any) => {
			state.tenantId = tenantId;
			getTenantInfo(tenantId).then((res: any) => {
				state.tenantInfo.tenantId = res.data.tenantId;
				state.tenantInfo.companyName = res.data.companyName;
				state.tenantInfo.companyLogo = res.data.companyLogo;
				state.tenantInfo.tenantCode = res.data.tenantCode;
				state.tenantInfo.overdueTime = res.data.overdueTime;
			});
			state.showWindows = true;
		};

		//取消
		const onCancel = () => {
			tenantFormRef.value.resetFields();
			state.showWindows = false;
		};

		//打开上传头像的框
		const onCropperDialogOpen = () => {
			cropperDialogRef.value.openDialog(state.tenantInfo.companyLogo);
		};

		//提交
		const onSubmit = () => {
			tenantFormRef.value.validate((valid: any) => {
				if (valid) {
					state.tenantInfo.overdueTime = dayjs(state.tenantInfo.overdueTime).format('YYYY-MM-DD 00:00:00');
					modTenantInfo(state.tenantInfo, state.tenantId).then((res: any) => {
						if (res.code == 200) {
							onCancel();
							context.emit('initTableData');
						} else {
							ElMessage.error(res.message);
						}
					});
				}
			});
		};

		//禁用时间
		const disableDate = (time: any) => {
			// 禁用以后的时间
			return time.getTime() < Date.now() - 8.64e6;
		};

		return {
			tenantFormRef,
			cropperDialogRef,
			openWindows,
			onCancel,
			onSubmit,
			onCropperDialogOpen,
			disableDate,
			...toRefs(state),
		};
	},
};
</script>

<style scoped>
.cropper-img {
	margin: auto;
	width: 100px;
	height: 100px;
	border-radius: 100%;
}
</style>
